<template>
  <el-dialog title="订单跟踪" v-model="visible" :before-close="handleClose" width="40%">
    <el-steps direction="vertical" :active="6" finish-status="success" space="50px">
      <el-step v-for="item in defaultLogisticsList" :key="item.name" :title="item.name" :description="item.time"></el-step>
    </el-steps>
  </el-dialog>
</template>
<script setup lang="ts">
import { computed, defineOptions } from 'vue'

const defaultLogisticsList = [
  { name: '订单已提交，等待付款', time: '2017-04-01 12:00:00 ' },
  { name: '订单付款成功', time: '2017-04-01 12:00:00 ' },
  { name: '在北京市进行下级地点扫描，等待付款', time: '2017-04-01 12:00:00 ' },
  { name: '在分拨中心广东深圳公司进行卸车扫描，等待付款', time: '2017-04-01 12:00:00 ' },
  { name: '在广东深圳公司进行发出扫描', time: '2017-04-01 12:00:00 ' },
  { name: '到达目的地网点广东深圳公司，快件将很快进行派送', time: '2017-04-01 12:00:00 ' },
  { name: '订单已签收，期待再次为您服务', time: '2017-04-01 12:00:00 ' },
]
defineOptions({ name: 'LogisticsDialog' })
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['update:modelValue'])
const visible = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  },
})
function handleClose() {
  visible.value = false
}
</script>
<style></style>
